<template>
    <el-table :data="tableData" v-loading="tableLoading" :border="border" style="width: 100%">
        <el-table-column 
            v-for="item in columns"
            :width="item.width"
            :align="item.align ? item.align : 'center'" 
            :prop="item.prop" 
            :label="item.label">

            <template v-slot="{ row }">
                <slot :name="item.prop" :row="row">
                    {{ getProp(row, item) }}
                </slot>
            </template>
        </el-table-column>
        
    </el-table>
</template>

<script setup> 
// 处理数据格式xxx[].xx
let getProp = (row, item) => {
    // console.log(item.prop)
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}



// 定义表格的属性
let props = defineProps({
    "tableData":{
        type:Array
    },
    "columns":{
        type:Array
    },
    "tableLoading":{
        type:Boolean,
        default(){
            return false
        }
    },
    "border":{
        type:Boolean,
        default(){
            return true
        }
    }
  
})



// 使用方式
    // 给表格传递的属性
    // 1、tableData表对应写数据
    // 2、cloumns 每一列的属性描述，动态表头
    // 3、cloums 传递的类型，属性
        // label ：'表头'
        // prop:'数据对应的字段'
    // 4、tableLoading 表格的动画效果
    // 插槽
        // 通过具名插槽，具名(同columns的prop对应的值)
</script>
